<template>
	<div class="Login">
		<div class="container">
			<div class="LoginLogo">
				<div class="logo-text">鸿运骏腾TMS</div>
			</div>
			<div class="identeContainer">
				<div>
					<input placeholder="请输入租户" maxlength="50" ref="tenantCode" v-model="tenantCode"/>
				</div>
				<div>
					<input placeholder="请输入账号" maxlength="50" ref="userName" @keyup.enter="getFocus('password')" v-model="userName"/>
				</div>
				<div>
					<input placeholder="请输入密码" maxlength="50" type="password" ref="password" @keyup.enter="login"	v-model="password"/>
				</div>
				<button class='login' @click='login'>登录</button>
				<div class='repswd'><span @click='repwd'>忘记密码</span><span @click='reg'>注册</span></div>
			</div>
			<div class="App_Version"><span>{{this.$store.state.App_Version}}</span></div>
		</div>
	</div>
</template>
<script>
    import * as fetchObj from '@/api/login/login'
    import {
		base64encode,
        base64decode
    } from '@/utils/base64'
	import SockJS from 'sockjs-client'
	import Stomp from 'stompjs'
	import $ from 'jquery'
  	import { MarkAsRead } from '../../api/api';
	let stompClient = null
	let timer = null
	let iconWidth = null
	export default {
		name: 'Login',
		data() {
			return {
                fetchObj,
				userName: '', // 用户名
				password: '', // 验证码
				tenantCode: 'hyjt',
				tips_Msg: '', // 提示信息
				ifTips: false, // 提示信息是否显示
				MinuteNum: 60, // 发送验证码倒计时
				CountDown: ''
			}
		},
		mounted() {
			let that = this;
			if (that.getItem('SXJF_phone_second') && that.getItem('SXJF_pwd_second')) {
				that.userName = that.getItem('SXJF_phone_second');
				that.password = that.getItem('SXJF_pwd_second');
				that.tenantCode = that.getItem('SXJF_tenant_Code_second'); 
				setTimeout(function(){
					that.login();
				},1500)
			}
		},
		created() {
			window.VersionShow = this.VersionShow;
			window.Device_Ajax = this.Device_Ajax;
			this.loginVueMounted();
		},
		// 页面销毁前
		beforeDestroy() {
			let that = this;
			clearInterval(that.CountDown)
		},
		methods: {
			loginVueMounted: function () {
				// 安卓
				try {
					CallAndroidOrIOS.callAndroid('登录页面已加载', '');
				} catch (error) {}
				// 苹果
				try {
					window.webkit.messageHandlers.messageSend.postMessage({
						a: '登录页面已加载'
					})
				} catch (error) {}
			},
			// 显示版本号
			VersionShow: function (v) {
				this.$store.state.App_Version = v;
			},
			Device_Ajax: function (d) {
				this.$store.state.Device = d;
			},
			// 点击登录按钮
			login() {
				let that = this
				if (!this.tenantCode) {
					that.$alert('租户不能为空', '提示', {
						confirmButtonText: '确定'
					})
					return;
				} else if  (!this.userName) {
					that.$alert('用户名不能为空', '提示', {
						confirmButtonText: '确定'
					})
					return;
				} else if (!this.password) {
					that.$alert('密码不能为空', '提示', {
						confirmButtonText: '确定'
					})
					return;
				}
				let postData = {
					username: this.userName, // 手机号
					password: Base64.encode(this.password), // 密码
					tenantCode: this.tenantCode
				}
				this.httpRequest1('post', this.fetchObj.loginUrl, postData).then(res => {
                    localStorage.setItem('jwt', res.data.token);
                    // localStorage.setItem('jwt', res.data);
					let userInfo = res.data.user
					that.$store.state.isFirstInApp = true
                    that.$store.state.userInfo = userInfo;
					console.log(res.data.startOrgnizationName, 'res.data.startOrgnizationName')
					if (res.data.startOrgnizationName && res.data.startOrgnizationName.shortName) {
                    	that.$store.state.startOrgnizationName = res.data.startOrgnizationName.shortName;
					}
					that.$store.state.WaybillData = []; // 我的任务页面数据清空
					that.setItem({
						name: 'SXJF_USERDATA_second',
						value: that.userInfo,
						expires: 7 * 24 * 60 * 1000 * 60,
					})
					that.setItem({
						name: 'SXJF_phone_second',
						value: that.userName,
					})
					that.setItem({
						name: 'SXJF_pwd_second',
						value: that.password
					})
					
					that.setItem({
						name: 'SXJF_tenant_Code_second',
						value: that.tenantCode
					})
					that.$router.push({
						name: 'Index'
					})
				})
			},
			constructor(name) {
				this.name = 'storage';
			},
			// 移出缓存
			removeItem(name) {
				localStorage.removeItem(name);
			},
			// 移出全部缓存
			clear() {
				localStorage.clear();
			},
			// 跳转到 忘记密码 页面 (验证手机号)
			repwd() {
				this.$router.push({
					name: 'Identifying',
					query: {
						page: 'ForgotPwd'
					}
				})
			},
			// 跳转到 注册 页面 (验证手机号)
			reg() {
				this.$router.push({
					name: 'Identifying',
					query: {
						page: 'Reg'
					}
				})
			}
		}
	}
</script>
<style lang="less" scoped>
	@import "../../components/publicLess.less";
	.Login {
		overflow: hidden;
		.tag{
			padding: 0 50/50rem;
		}
	}
	.LoginLogo {
		padding: 60/50rem 0;
		margin-bottom: 50/50rem;
		text-align: center;
		img {
			// width: 200/50rem;
			width: 480/50rem;
		}
		.logo-text {
			font-weight: 700;
			font-size: 50/50rem;
			color: @PublicColor;
		}
	}
	.login {
		width: 100%;
		height: 73/50rem;
		line-height: 73/50rem;
		font-size: 30/50rem;
		background-color: @PublicColor;
		color: #fff;
		margin-top: 50/50rem;
		margin: 50/50rem auto 0;
		border: none;
		border-radius: 36.5/50rem;
		outline: none;
	}
	.identeContainer {
		padding: 0 50/50rem;
		box-sizing: border-box;
		width: 100%;
		height: 100%;
		font-size: 30/50rem;
		&>div {
			position: relative;
			overflow: hidden;
			margin-bottom: 70/50rem;
			height: 65/50rem;
			width: 100%;
			border-bottom: 1/50rem solid #aaa;
			.icon-iconfontcuowu {
				right: 20/50rem;
				color: #777;
				top: 12/50rem;
			}
			&>input {
				width: 620/50rem;
			}
			&:nth-child(2) {
				.icon-iconfontcuowu {
					right: 240/50rem;
				}
				&>input {
					width: 420/50rem;
				}
			}
			&>span:nth-child(1) {
				float: left;
				margin-right: 30/50rem;
				height: 45/50rem;
				line-height: 48/50rem;
				display: block;
			}
			&>input {
				float: left;
				width: 100%;
				height: 60/50rem;
				border: none;
				border-radius: 0;
			}
			&>.button {
				position: absolute;
				right: 0;
				top: 0;
				height: 50/50rem;
				line-height: 50/50rem;
				box-sizing: border-box;
				padding: 0/50rem 15/50rem;
				font-size: 28/50rem;
				color: @PublicColor;
			}
		}
		.g_signBtn {
			border-radius: 32.5/50rem;
		}
		div.repswd {
			margin-top: 20/50rem;
			font-size: 28/50rem;
			color: #777;
			border-bottom: none;
		}
		div.repswd>span:nth-child(1) {
			float: left;
		}
		div.repswd>span:nth-child(2) {
			float: right;
		}
	}
	.App_Version {
		position: fixed;
		bottom: 0;
		width: 100%;
		text-align: center;
		font-size: 30/50rem;
		color: #666;
	}
</style>